<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('dict.queryCodition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" style="padding: 10px 20px 0">
        <el-row>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('dict.num')}}</div>
              <el-input v-model="listQuery.code" :placeholder="$t('placeholder.name')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('dict.detail.labelZhTc')}}</div>
              <el-input v-model="listQuery.labelZhTc" :placeholder="$t('placeholder.name')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('dict.detail.labelZhCh')}}</div>
              <el-input v-model="listQuery.labelZhCh" :placeholder="$t('placeholder.name')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('dict.detail.labelEnUs')}}</div>
              <el-input v-model="listQuery.labelEnUs" :placeholder="$t('placeholder.name')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('dict.detail.remark')}}</div>
              <el-input v-model="listQuery.remark" :placeholder="$t('placeholder.name')" clearable></el-input>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <el-button class="yt-btn-ys" type="primary" @click="handleFilter">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list">
      <el-row class="list-content">
        <el-col><span>{{$t('dict.dataList')}}</span></el-col>
      </el-row>
      <div class="list-operation">
        <div style="margin-bottom: 10px">
          <el-button class="yt-btn-ys" type="primary" @click="viewDict('add', '')">{{$t('button.new')}}</el-button>
        </div>
        <el-table :key="tableKey" :data="list" :empty-text="$t('placeholder.emptyText')" v-loading.body="loading" border class="yt-table yt-temporary" max-height="600">
          <el-table-column align="center" :label="$t('dict.code')" prop="code" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.detail.labelZhTc')" prop="labelZhTc" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.detail.labelZhCh')" prop="labelZhCh" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.detail.labelEnUs')" prop="labelEnUs" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.detail.remark')" prop="remark" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.detail.orderNum')" prop="orderNum" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.updateName')" prop="updateName" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.updateTime')" prop="updateTime" :formatter="formatter.formatTimes" min-width="150"/>
          <el-table-column align="center" :label="$t('dict.operation')" min-width="150">
            <template slot-scope="scope">
              <el-button class="yt-btn-ys" style="padding: 5px 10px;margin-top:2px;margin-bottom:2px" size="small" type="primary" @click="viewDict('upd', scope.row)">{{$t('button.edit')}}</el-button>
              <el-button class="yt-btn" style="padding: 5px 10px;margin-top:2px;margin-bottom:2px" size="small" type="warning" @click="delDict(scope.row.id)">{{$t('button.delete')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="!loading" class="pagination-container" style="margin-top: 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="listQuery.page"
          :page-sizes="[10, 20, 30, 50, 100, 200]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <el-dialog
        :title="title"
        :visible.sync="dictDialogVisible"
        :close-on-click-modal="false"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item :label="$t('dict.code')">
            <!-- <el-input v-model="form.code"></el-input> -->
            <el-input
              v-model="form.code"
              :disabled="form.id ? true : false"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('dict.detail.labelZhTc')">
            <el-input v-model="form.labelZhTc"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dict.detail.labelZhCh')">
            <el-input v-model="form.labelZhCh"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dict.detail.labelEnUs')">
            <el-input v-model="form.labelEnUs"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dict.detail.remark')">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
          <el-form-item :label="$t('dict.detail.orderNum')">
            <el-input v-model="form.orderNum"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dictDialogVisible = false">{{$t('button.cancel')}}</el-button>
        <el-button type="primary" @click="editorDict">{{$t('button.determine')}}</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    dictValuePage,
    addDictValue,
    putDictValue,
    delDictValue,
    validationCode
  } from '@/api/e-formula/dict/index';
  import formatter from '@/utils/formatter';
  import { mapGetters } from 'vuex';

  export default {
    name: 'userManage',
    data() {
      return {
        formatter,
        form: {
          code: '',
          labelZhTc: '',
          labelZhCh: '',
          labelEnUs: '',
          orderNum: 1
        },
        list: null,
        total: null,
        loading: true,
        listQuery: {
          page: 1,
          limit: 20
        },
        parentId: '',
        dictDialogVisible: false,
        tableKey: 0,
        title: '',
        config: Config.I18n
      };
    },
    created() {
      // 获取id
      this.parentId = this.$route.query.id;
      this.getList();
    },
    computed: {
      ...mapGetters(['elements'])
    },
    methods: {
      getList() {
        this.loading = true;
        this.listQuery.parentId = this.parentId;
        dictValuePage(this.listQuery).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
          this.loading = false;
        });
      },
      viewDict(i, info) {
        const val = {
          id: info.id,
          code: info.code,
          labelZhTc: info.labelZhTc,
          labelZhCh: info.labelZhCh,
          labelEnUs: info.labelEnUs,
          remark: info.remark,
          orderNum: info.orderNum
        };
        this.form = i === 'add' ? {} : val;
        this.title = i === 'add' ? this.$t('button.new') : this.$t('button.edit');
        this.dictDialogVisible = true;
      },
      editorDict() {
        // 父级id
        this.form.parentId = this.parentId;
        // 新增
        if (!this.form.id) {
          // 验证编码是否存在
          validationCode(this.form.code).then(res => {
            if (res.data) {
              this.addDictInfo();
            } else {
              this.$notify({
                title: this.$t('tips.fail'),
                message: this.$t('dict.codeExisted'),
                type: 'warning',
                duration: 2000
              });
            }
          });
        } else {
          // 编辑
          putDictValue(this.form.id, this.form).then(() => {
            this.form = {};
            this.dictDialogVisible = false;
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.editSuccess'),
              type: 'success',
              duration: 2000
            });
            // 刷新列表
            this.getList();
          });
        }
      },
      addDictInfo() {
        addDictValue(this.form).then(res => {
          console.log('返回值', res);
          this.form = {};
          this.dictDialogVisible = false;
          this.$notify({
            title: this.$t('tips.success'),
            message: this.$t('tips.addSuccess'),
            type: 'success',
            duration: 2000
          });
          // 刷新列表
          this.getList();
        });
      },
      delDict(id) {
        this.$confirm(this.$t('tips.permanentDelete'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('tips.determine'),
          cancelButtonText: this.$t('tips.cancel'),
          type: 'warning'
        }).then(() => {
          delDictValue(id).then(() => {
            this.$notify({
              title: this.$t('tips.success'),
              message: this.$t('tips.deleteSuccess'),
              type: 'warning',
              duration: 2000
            });
            // 刷新列表
            this.getList();
          });
        });
      },
      handleFilter() {
        this.getList();
      },
      reset() {
        this.listQuery = {};
        this.getList();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  };
</script>
